import React, {Component} from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import dashboardStyle from "../assets/jss/material-dashboard-react/views/dashboardStyle.jsx";
import GridContainer from "../components/Grid/GridContainer";
import GridItem from "../components/Grid/GridItem";
import Card from "../components/Card/Card";
import CardHeader from "../components/Card/CardHeader";
import CardBody from "../components/Card/CardBody";
import CardFooter from "../components/Card/CardFooter";
import {AccessTime, ArrowUpward} from "@material-ui/icons";
import withStyles from "@material-ui/core/styles/withStyles";
import echartsTheme from './echartsTheme'
class index extends Component{
    componentWillMount(){
        echarts.registerTheme('theme', echartsTheme);
    }
    getOptions=()=>{
        const option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['最高气温','最低气温'],
                textStyle:{
                    fontSize: 12,//字体大小
                    color: '#ffffff'//字体颜色
                },

            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize:12,
                        color: '#ffffff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C',
                    textStyle: {
                        color: '#ffffff',
                        fontSize:12
                    }
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    textStyle: {
                        color: '#ffffff'
                    },
                    data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'最低气温',
                    type:'line',
                    textStyle: {
                        color: '#ffffff'
                    },
                    data:[1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [
                            {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        };
        return option;
    }

    getPInOptions=()=>{
        let option = {
            angleAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                z: 10,
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize:12,
                        color: '#ffffff'
                    }
                }
            },
            radiusAxis: {
            },
            polar: {
            },
            series: [{
                type: 'bar',
                data: [1, 2, 3, 4, 3, 5, 1],
                coordinateSystem: 'polar',
                name: '苹果',
                stack: 'a'
            }, {
                type: 'bar',
                data: [2, 4, 6, 1, 3, 2, 1],
                coordinateSystem: 'polar',
                name: '葡萄',
                stack: 'a'
            }, {
                type: 'bar',
                data: [1, 2, 3, 4, 1, 2, 5],
                coordinateSystem: 'polar',
                name: '梨子',
                stack: 'a'
            }],
            legend: {
                show: true,
                data: ['苹果', '葡萄', '梨子'],
                textStyle:{
                    fontSize: 12,//字体大小
                    color: '#ffffff'//字体颜色
                },
            }
        };
        return option;
    }

    getAdsOptions=()=>{
        let option = {

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:274, name:'联盟广告'},
                        {value:235, name:'视频广告'},
                        {value:400, name:'搜索引擎'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: '#000',
                                fontSize:12
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: '#000',
                                fontSize:12
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        return option;
    }
    render() {
        const { classes } = this.props;
        return (
            <div>
                <GridContainer>
                    <GridItem md={8}>
                        <Card chart>
                            <CardHeader color="success">
                                <ReactEcharts
                                    option={this.getOptions()}
                                    style={{height: '350px'}}
                                    className='react_for_echarts' />
                            </CardHeader>
                            <CardBody>
                                <h4 className={classes.cardTitle}>未来一周天气预报</h4>
                                <p className={classes.cardCategory}>
                  <span className={classes.successText}>
                    <ArrowUpward className={classes.upArrowCardCategory} />持续升温
                  </span>{" "}
                                </p>
                            </CardBody>
                            <CardFooter chart>
                                <div className={classes.stats}>
                                    <AccessTime /> 更新于四分钟前
                                </div>
                            </CardFooter>
                        </Card>
                    </GridItem>
                </GridContainer>
                <GridContainer>
                    <GridItem md={6}>
                        <Card chart>
                            <CardHeader color="warning">
                                <ReactEcharts
                                    option={this.getPInOptions()}
                                    style={{height: '400px'}}
                                    className='react_for_echarts' />
                            </CardHeader>
                            <CardBody>
                                <h4 className={classes.cardTitle}>近一周水果售卖情况</h4>
                                <p className={classes.cardCategory}>
                                </p>
                            </CardBody>
                            <CardFooter chart>
                                <div className={classes.stats}>
                                    <AccessTime /> 更新于四分钟前
                                </div>
                            </CardFooter>
                        </Card>
                    </GridItem>
                    <GridItem md={6}>
                        <Card chart>
                            <CardHeader color="info">
                                <ReactEcharts
                                    option={this.getAdsOptions()}
                                    style={{height: '400px'}}
                                    className='react_for_echarts' />
                            </CardHeader>
                            <CardBody>
                                <h4 className={classes.cardTitle}>客户来源分析</h4>
                            </CardBody>
                            <CardFooter chart>
                                <div className={classes.stats}>
                                    <AccessTime /> 更新于十分钟前
                                </div>
                            </CardFooter>
                        </Card>
                    </GridItem>
                </GridContainer>
            </div>

        );
    }
}
export default withStyles(dashboardStyle)(index);
